<template>
  <el-popover
    placement="bottom"
    trigger="click"
    popper-class="date-year-filtrate-popover"
    :teleported="false"
    :visible="dateFiltratePopoverVisible"
    :disabled="item.value !== 'custom'"
    v-for="(item, index) of [
      {
        value: 'lastOneYear',
        label: '近一年',
      },
      {
        value: 'lastThreeYears',
        label: '近三年',
      },
      {
        value: 'custom',
        label: '自定义',
      },
    ]"
    :key="index"
    @after-leave="afterHideYearRangePopover"
  >
    <template #reference>
      <div
        class="date-year-filtrate-popover-item"
        :class="{ 'active-date-year-filtrate-popover-item': item.value === dateFiltrateValue }"
        @click="changeDateFiltrate(item.value)"
      >
        {{ item.label }}
      </div>
    </template>
    <div class="date-year-filtrate-popover-year-range">
      <div class="date-year-filtrate-popover-year-range-item">
        <span class="date-year-filtrate-popover-year-range-item__label">开始年份：</span>
        <el-date-picker
          v-model="filtrateYear.startYear"
          type="year"
          placeholder="请选择开始年份"
          value-format="YYYY"
          :disabled-date="startYearPickerOptions"
          @change="submitFiltrateYear('start')"
        />
      </div>
      <div style="margin: 0 10px">-</div>
      <div class="date-year-filtrate-popover-year-range-item">
        <span class="date-year-filtrate-popover-year-range-item__label">结束年份：</span>
        <el-date-picker
          v-model="filtrateYear.endYear"
          type="year"
          placeholder="请选择结束年份"
          value-format="YYYY"
          :disabled-date="endYearPickerOptions"
          @change="submitFiltrateYear('end')"
        />
      </div>
    </div>
  </el-popover>
</template>

<script setup>
import { ref, defineEmits, onMounted } from "vue";

const emit = defineEmits(["getYearRange"]);

const defaultFiltrateYear = {
  // 年份筛选data默认值
  startYear: "",
  endYear: "",
};

const currentYear = ref(null); // 当前年份
const dateFiltrateValue = ref("lastThreeYears"); // 时间筛选变量
const dateFiltratePopoverVisible = ref(false); // 时间筛选popover自定义显隐变量标识
const filtrateYear = ref({
  // 年份筛选data
  startYear: "",
  endYear: "",
});

const changeDateFiltrate = (value) => {
  // 切换日期筛选
  if (dateFiltrateValue.value === value && value !== "custom") return;
  dateFiltrateValue.value = value;
  dateFiltratePopoverVisible.value = value === "custom";
  if (value !== "custom") {
    let returnYear = "";
    switch (value) {
      case "lastOneYear":
        returnYear = [currentYear.value, currentYear.value];
        break;
      case "lastThreeYears":
        returnYear = [currentYear.value - 2, currentYear.value];
        break;
      default:
        returnYear = [currentYear.value, currentYear.value];
        break;
    }
    emit("getYearRange", returnYear);
    filtrateYear.value = { ...defaultFiltrateYear };
  }
};

const submitFiltrateYear = (yearType) => {
  // 提交年份
  if (filtrateYear.value.startYear && filtrateYear.value.endYear) {
    emit("getYearRange", [Number(filtrateYear.value.startYear), Number(filtrateYear.value.endYear)]);
    dateFiltratePopoverVisible.value = false;
  }
};
const afterHideYearRangePopover = () => {
  // popover关闭后
  // console.log('filtrateYear.value: ', filtrateYear.value);
  // console.log('defaultFiltrateYear: ', defaultFiltrateYear);
};

const startYearPickerOptions = (time) => {
  // 开始年份禁用校验
  const year = time.getFullYear();
  if (filtrateYear.value.endYear) {
    return year > Number(filtrateYear.value.endYear) || year > currentYear.value;
  } else {
    return year > currentYear.value;
  }
};

const endYearPickerOptions = (time) => {
  // 结束年份禁用校验
  const year = time.getFullYear();
  if (filtrateYear.value.startYear) {
    return year < Number(filtrateYear.value.startYear) || year > currentYear.value;
  } else {
    return year > currentYear.value;
  }
};

onMounted(() => {
  currentYear.value = new Date().getFullYear();
});
</script>

<style scoped lang="less">
.date-year-filtrate-popover-item {
  height: 100%;
  display: flex;
  padding: 0 15px;
  align-items: center;
  justify-content: center;
  background: #000022;
  box-shadow: inset 0px 0px 8px 0px #3d7fff;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
}

.date-year-filtrate-popover-item:not(:last-child) {
  margin-right: 10px;
}

.active-date-year-filtrate-popover-item {
  background: linear-gradient(60deg, #0e5fff 0%, #00ffff 100%);
}

.date-year-filtrate-popover {
  &-year-range {
    display: flex;
    align-items: center;

    &-item {
      display: flex;
      align-items: center;

      > span {
        flex-shrink: 0;
      }
    }
    :deep(.el-date-editor) {
      width: 200px;
      opacity: 1;
    }
  }
}
</style>
<style lang="less">
.date-year-filtrate-popover {
  width: auto !important;
}
</style>
